import { _ as n, c as s, o as a, b as t, d as o } from './app.9ea9a1e7.js';
const p =
    '{"title":"图标","description":"","frontmatter":{},"headers":[{"level":2,"title":"组件库图标","slug":"组件库图标"},{"level":2,"title":"Svg Sprite 图标","slug":"svg-sprite-图标"},{"level":3,"title":"使用","slug":"使用"},{"level":2,"title":"Iconify 图标","slug":"iconify-图标"},{"level":2,"title":"图标选择器","slug":"图标选择器"},{"level":3,"title":"图标集预生成","slug":"图标集预生成"},{"level":3,"title":"生成","slug":"生成"},{"level":3,"title":"优缺点","slug":"优缺点"}],"relativePath":"dep/icon.md","lastUpdated":1632875926698}',
  c = {},
  e = [
    t(
      'h1',
      { id: '图标' },
      [t('a', { class: 'header-anchor', href: '#图标', 'aria-hidden': 'true' }, '#'), o(' 图标')],
      -1,
    ),
    t('p', null, '项目中有以下多种图标使用方式。', -1),
    t(
      'h2',
      { id: '组件库图标' },
      [
        t('a', { class: 'header-anchor', href: '#组件库图标', 'aria-hidden': 'true' }, '#'),
        o(' 组件库图标'),
      ],
      -1,
    ),
    t('p', null, [o('使用 '), t('code', null, 'ant-design-vue'), o(' 提供的图标')], -1),
    t(
      'div',
      { class: 'language-vue' },
      [
        t('pre', null, [
          t('code', null, [
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('template'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            o('\n  '),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('StarOutlined'),
              ]),
              o(),
              t('span', { class: 'token punctuation' }, '/>'),
            ]),
            o('\n  '),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('StarFilled'),
              ]),
              o(),
              t('span', { class: 'token punctuation' }, '/>'),
            ]),
            o('\n  '),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('StarTwoTone'),
              ]),
              o(),
              t('span', { class: 'token attr-name' }, 'twoToneColor'),
              t('span', { class: 'token attr-value' }, [
                t('span', { class: 'token punctuation attr-equals' }, '='),
                t('span', { class: 'token punctuation' }, '"'),
                o('#eb2f96'),
                t('span', { class: 'token punctuation' }, '"'),
              ]),
              o(),
              t('span', { class: 'token punctuation' }, '/>'),
            ]),
            o('\n'),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '</'),
                o('template'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            o('\n\n'),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('script'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            t('span', { class: 'token script' }, [
              t('span', { class: 'token language-javascript' }, [
                o('\n  '),
                t('span', { class: 'token keyword' }, 'import'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o(' defineComponent '),
                t('span', { class: 'token punctuation' }, '}'),
                o(),
                t('span', { class: 'token keyword' }, 'from'),
                o(),
                t('span', { class: 'token string' }, "'vue'"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n  '),
                t('span', { class: 'token keyword' }, 'import'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o(' StarOutlined'),
                t('span', { class: 'token punctuation' }, ','),
                o(' StarFilled'),
                t('span', { class: 'token punctuation' }, ','),
                o(' StarTwoTone '),
                t('span', { class: 'token punctuation' }, '}'),
                o(),
                t('span', { class: 'token keyword' }, 'from'),
                o(),
                t('span', { class: 'token string' }, "'@ant-design/icons-vue'"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n  '),
                t('span', { class: 'token keyword' }, 'export'),
                o(),
                t('span', { class: 'token keyword' }, 'default'),
                o(),
                t('span', { class: 'token function' }, 'defineComponent'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n    components'),
                t('span', { class: 'token operator' }, ':'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o(' StarOutlined'),
                t('span', { class: 'token punctuation' }, ','),
                o(' StarFilled'),
                t('span', { class: 'token punctuation' }, ','),
                o(' StarTwoTone '),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n  '),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n'),
              ]),
            ]),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '</'),
                o('script'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            o('\n'),
          ]),
        ]),
      ],
      -1,
    ),
    t(
      'h2',
      { id: 'svg-sprite-图标' },
      [
        t('a', { class: 'header-anchor', href: '#svg-sprite-图标', 'aria-hidden': 'true' }, '#'),
        o(' Svg Sprite 图标'),
      ],
      -1,
    ),
    t(
      'h3',
      { id: '使用' },
      [t('a', { class: 'header-anchor', href: '#使用', 'aria-hidden': 'true' }, '#'), o(' 使用')],
      -1,
    ),
    t('p', null, [o('将需要的 svg 图标放到'), t('code', null, 'src/assets/icons'), o('内')], -1),
    t('p', null, '例: test.svg', -1),
    t('ol', null, [t('li', null, [o('使用'), t('code', null, 'SvgIcon'), o('组件进行展示')])], -1),
    t(
      'div',
      { class: 'language-vue' },
      [
        t('pre', null, [
          t('code', null, [
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('template'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            o('\n  '),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('SvgIcon'),
              ]),
              o(),
              t('span', { class: 'token attr-name' }, 'name'),
              t('span', { class: 'token attr-value' }, [
                t('span', { class: 'token punctuation attr-equals' }, '='),
                t('span', { class: 'token punctuation' }, '"'),
                o('test'),
                t('span', { class: 'token punctuation' }, '"'),
              ]),
              o(),
              t('span', { class: 'token punctuation' }, '/>'),
            ]),
            o('\n'),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '</'),
                o('template'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            o('\n\n'),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('script'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            t('span', { class: 'token script' }, [
              t('span', { class: 'token language-javascript' }, [
                o('\n  '),
                t('span', { class: 'token keyword' }, 'import'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o(' defineComponent '),
                t('span', { class: 'token punctuation' }, '}'),
                o(),
                t('span', { class: 'token keyword' }, 'from'),
                o(),
                t('span', { class: 'token string' }, "'vue'"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n  '),
                t('span', { class: 'token keyword' }, 'import'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o(' SvgIcon '),
                t('span', { class: 'token punctuation' }, '}'),
                o(),
                t('span', { class: 'token keyword' }, 'from'),
                o(),
                t('span', { class: 'token string' }, "'/@/components/Icon'"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n  '),
                t('span', { class: 'token keyword' }, 'export'),
                o(),
                t('span', { class: 'token keyword' }, 'default'),
                o(),
                t('span', { class: 'token function' }, 'defineComponent'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n    components'),
                t('span', { class: 'token operator' }, ':'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o(' SvgIcon '),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n  '),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n'),
              ]),
            ]),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '</'),
                o('script'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            o('\n'),
          ]),
        ]),
      ],
      -1,
    ),
    t(
      'ol',
      { start: '2' },
      [t('li', null, [o('使用'), t('code', null, 'Icon'), o('组件进行展示')])],
      -1,
    ),
    t(
      'p',
      null,
      [
        o('以 '),
        t('code', null, '｜svg'),
        o(' 结尾会自动使用'),
        t('code', null, 'SvgIcon'),
        o('组件'),
      ],
      -1,
    ),
    t(
      'div',
      { class: 'language-vue' },
      [
        t('pre', null, [
          t('code', null, [
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('template'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            o('\n  '),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('Icon'),
              ]),
              o(),
              t('span', { class: 'token attr-name' }, 'name'),
              t('span', { class: 'token attr-value' }, [
                t('span', { class: 'token punctuation attr-equals' }, '='),
                t('span', { class: 'token punctuation' }, '"'),
                o('test|svg'),
                t('span', { class: 'token punctuation' }, '"'),
              ]),
              o(),
              t('span', { class: 'token punctuation' }, '/>'),
            ]),
            o('\n'),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '</'),
                o('template'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            o('\n\n'),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('script'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            t('span', { class: 'token script' }, [
              t('span', { class: 'token language-javascript' }, [
                o('\n  '),
                t('span', { class: 'token keyword' }, 'import'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o(' defineComponent '),
                t('span', { class: 'token punctuation' }, '}'),
                o(),
                t('span', { class: 'token keyword' }, 'from'),
                o(),
                t('span', { class: 'token string' }, "'vue'"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n  '),
                t('span', { class: 'token keyword' }, 'import'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o(' Icon '),
                t('span', { class: 'token punctuation' }, '}'),
                o(),
                t('span', { class: 'token keyword' }, 'from'),
                o(),
                t('span', { class: 'token string' }, "'/@/components/Icon'"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n  '),
                t('span', { class: 'token keyword' }, 'export'),
                o(),
                t('span', { class: 'token keyword' }, 'default'),
                o(),
                t('span', { class: 'token function' }, 'defineComponent'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n    components'),
                t('span', { class: 'token operator' }, ':'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o(' Icon '),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n  '),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n'),
              ]),
            ]),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '</'),
                o('script'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            o('\n'),
          ]),
        ]),
      ],
      -1,
    ),
    t(
      'h2',
      { id: 'iconify-图标' },
      [
        t('a', { class: 'header-anchor', href: '#iconify-图标', 'aria-hidden': 'true' }, '#'),
        o(' Iconify 图标'),
      ],
      -1,
    ),
    t(
      'p',
      null,
      [o('使用方式请参考 '), t('a', { href: './../components/icon.html' }, 'Icon 组件')],
      -1,
    ),
    t(
      'p',
      null,
      [
        o('项目中使用到的是 '),
        t(
          'a',
          {
            href: 'https://github.com/antfu/purge-icons/blob/main/packages/vite-plugin-purge-icons/README.md',
            target: '_blank',
            rel: 'noopener noreferrer',
          },
          'vite-plugin-purge-icons',
        ),
        o(' 这个插件来进行图标实现。'),
      ],
      -1,
    ),
    t('ol', null, [t('li', null, '安装依赖')], -1),
    t(
      'div',
      { class: 'language-bash' },
      [
        t('pre', null, [
          t('code', null, [
            o('\n'),
            t('span', { class: 'token function' }, 'yarn'),
            o(),
            t('span', { class: 'token function' }, 'add'),
            o(' @iconify/iconify\n\n'),
            t('span', { class: 'token function' }, 'yarn'),
            o(),
            t('span', { class: 'token function' }, 'add'),
            o(' @iconify/json @purge-icons/generated -D\n\n'),
          ]),
        ]),
      ],
      -1,
    ),
    t(
      'ol',
      { start: '2' },
      [t('li', null, [o('在 '), t('code', null, 'vite.config.ts'), o('内引入插件')])],
      -1,
    ),
    t(
      'div',
      { class: 'language-ts' },
      [
        t('pre', null, [
          t('code', null, [
            t('span', { class: 'token keyword' }, 'import'),
            o(' PurgeIcons '),
            t('span', { class: 'token keyword' }, 'from'),
            o(),
            t('span', { class: 'token string' }, "'vite-plugin-purge-icons'"),
            t('span', { class: 'token punctuation' }, ';'),
            o('\n\n'),
            t('span', { class: 'token keyword' }, 'export'),
            o(),
            t('span', { class: 'token keyword' }, 'default'),
            o(),
            t('span', { class: 'token punctuation' }, '{'),
            o('\n  plugins'),
            t('span', { class: 'token operator' }, ':'),
            o(),
            t('span', { class: 'token punctuation' }, '['),
            t('span', { class: 'token function' }, 'PurgeIcons'),
            t('span', { class: 'token punctuation' }, '('),
            t('span', { class: 'token punctuation' }, ')'),
            t('span', { class: 'token punctuation' }, ']'),
            t('span', { class: 'token punctuation' }, ','),
            o('\n'),
            t('span', { class: 'token punctuation' }, '}'),
            t('span', { class: 'token punctuation' }, ';'),
            o('\n'),
          ]),
        ]),
      ],
      -1,
    ),
    t('ol', { start: '3' }, [t('li', null, '编写 Icon 组件')], -1),
    t(
      'p',
      null,
      [
        o('完整代码 '),
        t(
          'a',
          {
            href: 'https://github.com/anncwb/vue-vben-admin/blob/main/src/components/Icon/src/Icon.vue',
            target: '_blank',
            rel: 'noopener noreferrer',
          },
          'src/components/Icon/src/Icon.vue',
        ),
      ],
      -1,
    ),
    t(
      'div',
      { class: 'language-vue' },
      [
        t('pre', null, [
          t('code', null, [
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('template'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            o('\n  '),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('SvgIcon'),
              ]),
              o(),
              t('span', { class: 'token attr-name' }, ':size'),
              t('span', { class: 'token attr-value' }, [
                t('span', { class: 'token punctuation attr-equals' }, '='),
                t('span', { class: 'token punctuation' }, '"'),
                o('size'),
                t('span', { class: 'token punctuation' }, '"'),
              ]),
              o(),
              t('span', { class: 'token attr-name' }, ':name'),
              t('span', { class: 'token attr-value' }, [
                t('span', { class: 'token punctuation attr-equals' }, '='),
                t('span', { class: 'token punctuation' }, '"'),
                o('getSvgIcon'),
                t('span', { class: 'token punctuation' }, '"'),
              ]),
              o(),
              t('span', { class: 'token attr-name' }, 'v-if'),
              t('span', { class: 'token attr-value' }, [
                t('span', { class: 'token punctuation attr-equals' }, '='),
                t('span', { class: 'token punctuation' }, '"'),
                o('isSvgIcon'),
                t('span', { class: 'token punctuation' }, '"'),
              ]),
              o(),
              t('span', { class: 'token attr-name' }, ':class'),
              t('span', { class: 'token attr-value' }, [
                t('span', { class: 'token punctuation attr-equals' }, '='),
                t('span', { class: 'token punctuation' }, '"'),
                o('[$attrs.class]'),
                t('span', { class: 'token punctuation' }, '"'),
              ]),
              o(),
              t('span', { class: 'token attr-name' }, ':spin'),
              t('span', { class: 'token attr-value' }, [
                t('span', { class: 'token punctuation attr-equals' }, '='),
                t('span', { class: 'token punctuation' }, '"'),
                o('spin'),
                t('span', { class: 'token punctuation' }, '"'),
              ]),
              o(),
              t('span', { class: 'token punctuation' }, '/>'),
            ]),
            o('\n  '),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('span'),
              ]),
              o('\n    '),
              t('span', { class: 'token attr-name' }, 'v-else'),
              o('\n    '),
              t('span', { class: 'token attr-name' }, 'ref'),
              t('span', { class: 'token attr-value' }, [
                t('span', { class: 'token punctuation attr-equals' }, '='),
                t('span', { class: 'token punctuation' }, '"'),
                o('elRef'),
                t('span', { class: 'token punctuation' }, '"'),
              ]),
              o('\n    '),
              t('span', { class: 'token attr-name' }, ':class'),
              t('span', { class: 'token attr-value' }, [
                t('span', { class: 'token punctuation attr-equals' }, '='),
                t('span', { class: 'token punctuation' }, '"'),
                o('[$attrs.class, '),
                t('span', { class: 'token punctuation' }, "'"),
                o('app-iconify anticon'),
                t('span', { class: 'token punctuation' }, "'"),
                o(', spin && '),
                t('span', { class: 'token punctuation' }, "'"),
                o('app-iconify-spin'),
                t('span', { class: 'token punctuation' }, "'"),
                o(']'),
                t('span', { class: 'token punctuation' }, '"'),
              ]),
              o('\n    '),
              t('span', { class: 'token attr-name' }, ':style'),
              t('span', { class: 'token attr-value' }, [
                t('span', { class: 'token punctuation attr-equals' }, '='),
                t('span', { class: 'token punctuation' }, '"'),
                o('getWrapStyle'),
                t('span', { class: 'token punctuation' }, '"'),
              ]),
              o('\n  '),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '</'),
                o('span'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            o('\n'),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '</'),
                o('template'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            o('\n'),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('script'),
              ]),
              o(),
              t('span', { class: 'token attr-name' }, 'lang'),
              t('span', { class: 'token attr-value' }, [
                t('span', { class: 'token punctuation attr-equals' }, '='),
                t('span', { class: 'token punctuation' }, '"'),
                o('ts'),
                t('span', { class: 'token punctuation' }, '"'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            t('span', { class: 'token script' }, [
              t('span', { class: 'token language-javascript' }, [
                o('\n  '),
                t('span', { class: 'token keyword' }, 'import'),
                o(' type '),
                t('span', { class: 'token punctuation' }, '{'),
                o(' PropType '),
                t('span', { class: 'token punctuation' }, '}'),
                o(),
                t('span', { class: 'token keyword' }, 'from'),
                o(),
                t('span', { class: 'token string' }, "'vue'"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n  '),
                t('span', { class: 'token keyword' }, 'import'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n    defineComponent'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n    ref'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n    watch'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n    onMounted'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n    nextTick'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n    unref'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n    computed'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n    CSSProperties'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n  '),
                t('span', { class: 'token punctuation' }, '}'),
                o(),
                t('span', { class: 'token keyword' }, 'from'),
                o(),
                t('span', { class: 'token string' }, "'vue'"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n\n  '),
                t('span', { class: 'token keyword' }, 'import'),
                o(' SvgIcon '),
                t('span', { class: 'token keyword' }, 'from'),
                o(),
                t('span', { class: 'token string' }, "'./SvgIcon.vue'"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n  '),
                t('span', { class: 'token keyword' }, 'import'),
                o(' Iconify '),
                t('span', { class: 'token keyword' }, 'from'),
                o(),
                t('span', { class: 'token string' }, "'@purge-icons/generated'"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n  '),
                t('span', { class: 'token keyword' }, 'import'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o(' isString '),
                t('span', { class: 'token punctuation' }, '}'),
                o(),
                t('span', { class: 'token keyword' }, 'from'),
                o(),
                t('span', { class: 'token string' }, "'/@/utils/is'"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n  '),
                t('span', { class: 'token keyword' }, 'import'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o(' propTypes '),
                t('span', { class: 'token punctuation' }, '}'),
                o(),
                t('span', { class: 'token keyword' }, 'from'),
                o(),
                t('span', { class: 'token string' }, "'/@/utils/propTypes'"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n\n  '),
                t('span', { class: 'token keyword' }, 'const'),
                o(),
                t('span', { class: 'token constant' }, 'SVG_END_WITH_FLAG'),
                o(),
                t('span', { class: 'token operator' }, '='),
                o(),
                t('span', { class: 'token string' }, "'|svg'"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n  '),
                t('span', { class: 'token keyword' }, 'export'),
                o(),
                t('span', { class: 'token keyword' }, 'default'),
                o(),
                t('span', { class: 'token function' }, 'defineComponent'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n    name'),
                t('span', { class: 'token operator' }, ':'),
                o(),
                t('span', { class: 'token string' }, "'GIcon'"),
                t('span', { class: 'token punctuation' }, ','),
                o('\n    components'),
                t('span', { class: 'token operator' }, ':'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o(' SvgIcon '),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n    props'),
                t('span', { class: 'token operator' }, ':'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n      '),
                t('span', { class: 'token comment' }, '// icon name'),
                o('\n      icon'),
                t('span', { class: 'token operator' }, ':'),
                o(' propTypes'),
                t('span', { class: 'token punctuation' }, '.'),
                o('string'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n      '),
                t('span', { class: 'token comment' }, '// icon color'),
                o('\n      color'),
                t('span', { class: 'token operator' }, ':'),
                o(' propTypes'),
                t('span', { class: 'token punctuation' }, '.'),
                o('string'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n      '),
                t('span', { class: 'token comment' }, '// icon size'),
                o('\n      size'),
                t('span', { class: 'token operator' }, ':'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n        type'),
                t('span', { class: 'token operator' }, ':'),
                o(),
                t('span', { class: 'token punctuation' }, '['),
                o('String'),
                t('span', { class: 'token punctuation' }, ','),
                o(' Number'),
                t('span', { class: 'token punctuation' }, ']'),
                o(),
                t('span', { class: 'token keyword' }, 'as'),
                o(' PropType'),
                t('span', { class: 'token operator' }, '<'),
                o('string '),
                t('span', { class: 'token operator' }, '|'),
                o(' number'),
                t('span', { class: 'token operator' }, '>'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n        '),
                t('span', { class: 'token keyword' }, 'default'),
                t('span', { class: 'token operator' }, ':'),
                o(),
                t('span', { class: 'token number' }, '16'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n      '),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n      spin'),
                t('span', { class: 'token operator' }, ':'),
                o(' propTypes'),
                t('span', { class: 'token punctuation' }, '.'),
                o('bool'),
                t('span', { class: 'token punctuation' }, '.'),
                t('span', { class: 'token function' }, 'def'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token boolean' }, 'false'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n      prefix'),
                t('span', { class: 'token operator' }, ':'),
                o(' propTypes'),
                t('span', { class: 'token punctuation' }, '.'),
                o('string'),
                t('span', { class: 'token punctuation' }, '.'),
                t('span', { class: 'token function' }, 'def'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token string' }, "''"),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n    '),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n    '),
                t('span', { class: 'token function' }, 'setup'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token parameter' }, 'props'),
                t('span', { class: 'token punctuation' }, ')'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n      '),
                t('span', { class: 'token keyword' }, 'const'),
                o(' elRef '),
                t('span', { class: 'token operator' }, '='),
                o(' ref'),
                t('span', { class: 'token operator' }, '<'),
                o('ElRef'),
                t('span', { class: 'token operator' }, '>'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token keyword' }, 'null'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n\n      '),
                t('span', { class: 'token keyword' }, 'const'),
                o(' isSvgIcon '),
                t('span', { class: 'token operator' }, '='),
                o(),
                t('span', { class: 'token function' }, 'computed'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, ')'),
                o(),
                t('span', { class: 'token operator' }, '=>'),
                o(' props'),
                t('span', { class: 'token punctuation' }, '.'),
                o('icon'),
                t('span', { class: 'token operator' }, '?.'),
                t('span', { class: 'token function' }, 'endsWith'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token constant' }, 'SVG_END_WITH_FLAG'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n      '),
                t('span', { class: 'token keyword' }, 'const'),
                o(' getSvgIcon '),
                t('span', { class: 'token operator' }, '='),
                o(),
                t('span', { class: 'token function' }, 'computed'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, ')'),
                o(),
                t('span', { class: 'token operator' }, '=>'),
                o(' props'),
                t('span', { class: 'token punctuation' }, '.'),
                o('icon'),
                t('span', { class: 'token punctuation' }, '.'),
                t('span', { class: 'token function' }, 'replace'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token constant' }, 'SVG_END_WITH_FLAG'),
                t('span', { class: 'token punctuation' }, ','),
                o(),
                t('span', { class: 'token string' }, "''"),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n      '),
                t('span', { class: 'token keyword' }, 'const'),
                o(' getIconRef '),
                t('span', { class: 'token operator' }, '='),
                o(),
                t('span', { class: 'token function' }, 'computed'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, ')'),
                o(),
                t('span', { class: 'token operator' }, '=>'),
                o(),
                t('span', { class: 'token template-string' }, [
                  t('span', { class: 'token template-punctuation string' }, '`'),
                  t('span', { class: 'token interpolation' }, [
                    t('span', { class: 'token interpolation-punctuation punctuation' }, '${'),
                    o('props'),
                    t('span', { class: 'token punctuation' }, '.'),
                    o('prefix '),
                    t('span', { class: 'token operator' }, '?'),
                    o(' props'),
                    t('span', { class: 'token punctuation' }, '.'),
                    o('prefix '),
                    t('span', { class: 'token operator' }, '+'),
                    o(),
                    t('span', { class: 'token string' }, "':'"),
                    o(),
                    t('span', { class: 'token operator' }, ':'),
                    o(),
                    t('span', { class: 'token string' }, "''"),
                    t('span', { class: 'token interpolation-punctuation punctuation' }, '}'),
                  ]),
                  t('span', { class: 'token interpolation' }, [
                    t('span', { class: 'token interpolation-punctuation punctuation' }, '${'),
                    o('props'),
                    t('span', { class: 'token punctuation' }, '.'),
                    o('icon'),
                    t('span', { class: 'token interpolation-punctuation punctuation' }, '}'),
                  ]),
                  t('span', { class: 'token template-punctuation string' }, '`'),
                ]),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n\n      '),
                t('span', { class: 'token keyword' }, 'const'),
                o(),
                t('span', { class: 'token function-variable function' }, 'update'),
                o(),
                t('span', { class: 'token operator' }, '='),
                o(),
                t('span', { class: 'token keyword' }, 'async'),
                o(),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, ')'),
                o(),
                t('span', { class: 'token operator' }, '=>'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n        '),
                t('span', { class: 'token keyword' }, 'if'),
                o(),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token function' }, 'unref'),
                t('span', { class: 'token punctuation' }, '('),
                o('isSvgIcon'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ')'),
                o(),
                t('span', { class: 'token keyword' }, 'return'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n\n        '),
                t('span', { class: 'token keyword' }, 'const'),
                o(' el '),
                t('span', { class: 'token operator' }, '='),
                o(),
                t('span', { class: 'token function' }, 'unref'),
                t('span', { class: 'token punctuation' }, '('),
                o('elRef'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n        '),
                t('span', { class: 'token keyword' }, 'if'),
                o(),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token operator' }, '!'),
                o('el'),
                t('span', { class: 'token punctuation' }, ')'),
                o(),
                t('span', { class: 'token keyword' }, 'return'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n\n        '),
                t('span', { class: 'token keyword' }, 'await'),
                o(),
                t('span', { class: 'token function' }, 'nextTick'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n        '),
                t('span', { class: 'token keyword' }, 'const'),
                o(' icon '),
                t('span', { class: 'token operator' }, '='),
                o(),
                t('span', { class: 'token function' }, 'unref'),
                t('span', { class: 'token punctuation' }, '('),
                o('getIconRef'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n        '),
                t('span', { class: 'token keyword' }, 'if'),
                o(),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token operator' }, '!'),
                o('icon'),
                t('span', { class: 'token punctuation' }, ')'),
                o(),
                t('span', { class: 'token keyword' }, 'return'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n\n        '),
                t('span', { class: 'token keyword' }, 'const'),
                o(' svg '),
                t('span', { class: 'token operator' }, '='),
                o(' Iconify'),
                t('span', { class: 'token punctuation' }, '.'),
                t('span', { class: 'token function' }, 'renderSVG'),
                t('span', { class: 'token punctuation' }, '('),
                o('icon'),
                t('span', { class: 'token punctuation' }, ','),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n        '),
                t('span', { class: 'token keyword' }, 'if'),
                o(),
                t('span', { class: 'token punctuation' }, '('),
                o('svg'),
                t('span', { class: 'token punctuation' }, ')'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n          el'),
                t('span', { class: 'token punctuation' }, '.'),
                o('textContent '),
                t('span', { class: 'token operator' }, '='),
                o(),
                t('span', { class: 'token string' }, "''"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n          el'),
                t('span', { class: 'token punctuation' }, '.'),
                t('span', { class: 'token function' }, 'appendChild'),
                t('span', { class: 'token punctuation' }, '('),
                o('svg'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n        '),
                t('span', { class: 'token punctuation' }, '}'),
                o(),
                t('span', { class: 'token keyword' }, 'else'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n          '),
                t('span', { class: 'token keyword' }, 'const'),
                o(' span '),
                t('span', { class: 'token operator' }, '='),
                o(' document'),
                t('span', { class: 'token punctuation' }, '.'),
                t('span', { class: 'token function' }, 'createElement'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token string' }, "'span'"),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n          span'),
                t('span', { class: 'token punctuation' }, '.'),
                o('className '),
                t('span', { class: 'token operator' }, '='),
                o(),
                t('span', { class: 'token string' }, "'iconify'"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n          span'),
                t('span', { class: 'token punctuation' }, '.'),
                o('dataset'),
                t('span', { class: 'token punctuation' }, '.'),
                o('icon '),
                t('span', { class: 'token operator' }, '='),
                o(' icon'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n          el'),
                t('span', { class: 'token punctuation' }, '.'),
                o('textContent '),
                t('span', { class: 'token operator' }, '='),
                o(),
                t('span', { class: 'token string' }, "''"),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n          el'),
                t('span', { class: 'token punctuation' }, '.'),
                t('span', { class: 'token function' }, 'appendChild'),
                t('span', { class: 'token punctuation' }, '('),
                o('span'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n        '),
                t('span', { class: 'token punctuation' }, '}'),
                o('\n      '),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n\n      '),
                t('span', { class: 'token keyword' }, 'const'),
                o(' getWrapStyle '),
                t('span', { class: 'token operator' }, '='),
                o(),
                t('span', { class: 'token function' }, 'computed'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token operator' }, ':'),
                o(),
                t('span', { class: 'token parameter' }, 'CSSProperties'),
                o(),
                t('span', { class: 'token operator' }, '=>'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n        '),
                t('span', { class: 'token keyword' }, 'const'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o(' size'),
                t('span', { class: 'token punctuation' }, ','),
                o(' color '),
                t('span', { class: 'token punctuation' }, '}'),
                o(),
                t('span', { class: 'token operator' }, '='),
                o(' props'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n        '),
                t('span', { class: 'token keyword' }, 'let'),
                o(' fs '),
                t('span', { class: 'token operator' }, '='),
                o(' size'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n        '),
                t('span', { class: 'token keyword' }, 'if'),
                o(),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token function' }, 'isString'),
                t('span', { class: 'token punctuation' }, '('),
                o('size'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ')'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n          fs '),
                t('span', { class: 'token operator' }, '='),
                o(),
                t('span', { class: 'token function' }, 'parseInt'),
                t('span', { class: 'token punctuation' }, '('),
                o('size'),
                t('span', { class: 'token punctuation' }, ','),
                o(),
                t('span', { class: 'token number' }, '10'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n        '),
                t('span', { class: 'token punctuation' }, '}'),
                o('\n\n        '),
                t('span', { class: 'token keyword' }, 'return'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n          fontSize'),
                t('span', { class: 'token operator' }, ':'),
                o(),
                t('span', { class: 'token template-string' }, [
                  t('span', { class: 'token template-punctuation string' }, '`'),
                  t('span', { class: 'token interpolation' }, [
                    t('span', { class: 'token interpolation-punctuation punctuation' }, '${'),
                    o('fs'),
                    t('span', { class: 'token interpolation-punctuation punctuation' }, '}'),
                  ]),
                  t('span', { class: 'token string' }, 'px'),
                  t('span', { class: 'token template-punctuation string' }, '`'),
                ]),
                t('span', { class: 'token punctuation' }, ','),
                o('\n          color'),
                t('span', { class: 'token operator' }, ':'),
                o(' color'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n          display'),
                t('span', { class: 'token operator' }, ':'),
                o(),
                t('span', { class: 'token string' }, "'inline-flex'"),
                t('span', { class: 'token punctuation' }, ','),
                o('\n        '),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n      '),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n\n      '),
                t('span', { class: 'token function' }, 'watch'),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, '('),
                t('span', { class: 'token punctuation' }, ')'),
                o(),
                t('span', { class: 'token operator' }, '=>'),
                o(' props'),
                t('span', { class: 'token punctuation' }, '.'),
                o('icon'),
                t('span', { class: 'token punctuation' }, ','),
                o(' update'),
                t('span', { class: 'token punctuation' }, ','),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o(' flush'),
                t('span', { class: 'token operator' }, ':'),
                o(),
                t('span', { class: 'token string' }, "'post'"),
                o(),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n\n      '),
                t('span', { class: 'token function' }, 'onMounted'),
                t('span', { class: 'token punctuation' }, '('),
                o('update'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n\n      '),
                t('span', { class: 'token keyword' }, 'return'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o(' elRef'),
                t('span', { class: 'token punctuation' }, ','),
                o(' getWrapStyle'),
                t('span', { class: 'token punctuation' }, ','),
                o(' isSvgIcon'),
                t('span', { class: 'token punctuation' }, ','),
                o(' getSvgIcon '),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n    '),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ','),
                o('\n  '),
                t('span', { class: 'token punctuation' }, '}'),
                t('span', { class: 'token punctuation' }, ')'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n'),
              ]),
            ]),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '</'),
                o('script'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            o('\n'),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '<'),
                o('style'),
              ]),
              o(),
              t('span', { class: 'token attr-name' }, 'lang'),
              t('span', { class: 'token attr-value' }, [
                t('span', { class: 'token punctuation attr-equals' }, '='),
                t('span', { class: 'token punctuation' }, '"'),
                o('less'),
                t('span', { class: 'token punctuation' }, '"'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            t('span', { class: 'token style' }, [
              t('span', { class: 'token language-css' }, [
                o('\n  '),
                t('span', { class: 'token selector' }, '.app-iconify'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n    '),
                t('span', { class: 'token property' }, 'display'),
                t('span', { class: 'token punctuation' }, ':'),
                o(' inline-block'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n    // '),
                t('span', { class: 'token property' }, 'vertical-align'),
                t('span', { class: 'token punctuation' }, ':'),
                o(' middle'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n\n    '),
                t('span', { class: 'token selector' }, '&-spin'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n      '),
                t('span', { class: 'token selector' }, 'svg'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n        '),
                t('span', { class: 'token property' }, 'animation'),
                t('span', { class: 'token punctuation' }, ':'),
                o(' loadingCircle 1s infinite linear'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n      '),
                t('span', { class: 'token punctuation' }, '}'),
                o('\n    '),
                t('span', { class: 'token punctuation' }, '}'),
                o('\n  '),
                t('span', { class: 'token punctuation' }, '}'),
                o('\n\n  '),
                t('span', { class: 'token selector' }, 'span.iconify'),
                o(),
                t('span', { class: 'token punctuation' }, '{'),
                o('\n    '),
                t('span', { class: 'token property' }, 'display'),
                t('span', { class: 'token punctuation' }, ':'),
                o(' block'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n    '),
                t('span', { class: 'token property' }, 'min-width'),
                t('span', { class: 'token punctuation' }, ':'),
                o(' 1em'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n    '),
                t('span', { class: 'token property' }, 'min-height'),
                t('span', { class: 'token punctuation' }, ':'),
                o(' 1em'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n    '),
                t('span', { class: 'token property' }, 'background-color'),
                t('span', { class: 'token punctuation' }, ':'),
                o(),
                t('span', { class: 'token atrule' }, [
                  t('span', { class: 'token rule' }, '@iconify-bg-color'),
                  t('span', { class: 'token punctuation' }, ';'),
                ]),
                o('\n    '),
                t('span', { class: 'token property' }, 'border-radius'),
                t('span', { class: 'token punctuation' }, ':'),
                o(' 100%'),
                t('span', { class: 'token punctuation' }, ';'),
                o('\n  '),
                t('span', { class: 'token punctuation' }, '}'),
                o('\n'),
              ]),
            ]),
            t('span', { class: 'token tag' }, [
              t('span', { class: 'token tag' }, [
                t('span', { class: 'token punctuation' }, '</'),
                o('style'),
              ]),
              t('span', { class: 'token punctuation' }, '>'),
            ]),
            o('\n'),
          ]),
        ]),
      ],
      -1,
    ),
    t(
      'h2',
      { id: '图标选择器' },
      [
        t('a', { class: 'header-anchor', href: '#图标选择器', 'aria-hidden': 'true' }, '#'),
        o(' 图标选择器'),
      ],
      -1,
    ),
    t(
      'h3',
      { id: '图标集预生成' },
      [
        t('a', { class: 'header-anchor', href: '#图标集预生成', 'aria-hidden': 'true' }, '#'),
        o(' 图标集预生成'),
      ],
      -1,
    ),
    t(
      'p',
      null,
      '由于图标选择器这个比较特殊的存在，项目会打包一些比较多的图标，图标选择器的图标需要事先指定并生成相应的文件。',
      -1,
    ),
    t(
      'h3',
      { id: '生成' },
      [t('a', { class: 'header-anchor', href: '#生成', 'aria-hidden': 'true' }, '#'), o(' 生成')],
      -1,
    ),
    t('ul', null, [t('li', null, '执行图标生成命令')], -1),
    t(
      'div',
      { class: 'language-bash' },
      [
        t('pre', null, [
          t('code', null, [t('span', { class: 'token function' }, 'yarn'), o(' gen:icon\n')]),
        ]),
      ],
      -1,
    ),
    t(
      'ul',
      null,
      [t('li', null, '这里会让你选择本地还是在线生成，两种方式各有利弊。如下图所示')],
      -1,
    ),
    t('p', null, 'local 表示本地，online 表示在线，回车确认', -1),
    t('p', null, [t('img', { src: '/doc-next/images/genIcon.png', alt: '' })], -1),
    t('ul', null, [t('li', null, '选择你要生成的图标集,回车确认')], -1),
    t('p', null, [t('img', { src: '/doc-next/images/selectIconSet.png', alt: '' })], -1),
    t(
      'ul',
      null,
      [
        t(
          'li',
          null,
          '选择图标输出的目录(项目默认 src/components/Icon/data)，可以直接回车选择默认',
        ),
      ],
      -1,
    ),
    t('p', null, [t('img', { src: '/doc-next/images/outDir.png', alt: '' })], -1),
    t(
      'p',
      null,
      '到这里图标集已经生成完成了，此时你的图标选择器已经是你所选的的图标集的图标了。',
      -1,
    ),
    t(
      'div',
      { class: 'danger custom-block' },
      [
        t('p', { class: 'custom-block-title' }, '注意不要频繁更新'),
        t(
          'p',
          null,
          '如果前面选择的是本地生成的话，频繁更换图标集，可能会导致图标丢失或者显示不出来',
        ),
      ],
      -1,
    ),
    t(
      'h3',
      { id: '优缺点' },
      [
        t('a', { class: 'header-anchor', href: '#优缺点', 'aria-hidden': 'true' }, '#'),
        o(' 优缺点'),
      ],
      -1,
    ),
    t('ul', null, [t('li', null, [t('strong', null, '在线图标(项目默认,推荐)')])], -1),
    t(
      'p',
      null,
      '该方式会在图标选择器使用到图标的时候进行在线请求,然后缓存对应的图标到浏览器。可以有效减少代码打包体积。',
      -1,
    ),
    t('p', null, '如果你的项目可以访问外网，建议可以使用这种方式', -1),
    t(
      'p',
      null,
      [t('strong', null, '缺点：'), o(' 在局域网或者无法访问到外网的环境中图标显示不出来')],
      -1,
    ),
    t('ul', null, [t('li', null, [t('strong', null, '本地图标')])], -1),
    t(
      'p',
      null,
      '该方式会在打包的时候将图标选择器的图标全部打包到 js 内。在使用的时候不会额外的请求在线图标',
      -1,
    ),
    t(
      'p',
      null,
      [
        t('strong', null, '缺点：'),
        o(' 打包体积会偏大，具体的体积增加得看前面选择图标集的时候选择的图标数量的多少决定'),
      ],
      -1,
    ),
  ];
var l = n(c, [
  [
    'render',
    function (n, t, o, p, c, l) {
      return a(), s('div', null, e);
    },
  ],
]);
export { p as __pageData, l as default };
